<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head th:include="include :: header">
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link rel="stylesheet" href="/css/phone/LUploader2.css"/>
</head>

<body>
<header class="mui-bar mui-bar-nav">
    <a href="javascript:history.go(-1)" class="mui-icon mui-pull-left"><span style="font-size: 15px">返回</span></a>
    <h1 class="mui-title">上传图书</h1>
</header>
<!-- 必要的form标签 -->
<form class="stylin_form1" action="/iphone/contribute/apply" method="post">
    <!-- 控件组，即各种控件的容器 -->
    <fieldset>
        <legend><span>图书基本信息&nbsp;必填</span></legend>
        <!-- 开始单行文本输入控件 -->
        <section>
            <!-- for属性把标注与控件关联起来，它的值必须与控件ID值相同 -->
            <!--书名-->
            <label for="bookName">书名<span> *</span></label>
            <input type="text" id="bookName" name="bookName"/>
        </section>
        <!--作者-->
        <section>
            <label for="author">作者<span>*</span></label>
            <input type="text" id="author" name="author" maxlength="200"/>
        </section>
        <!--出版社-->
        <section>
            <label for="press">出版社<span>*</span></label>
            <input type="text" id="press" name="press" maxlength="20"/>
        </section>
        <!--图书描述-->
        <section>
            <label for="content">图书描述<span> *</span></label>
            <textarea id="content" name="content" placeholder="输入您对本书的描述"></textarea>
        </section>
        <!--图书上传时间
            在后台添加上传时间也可以
        -->
        <!--<section hidden="hidden">-->
        <!--<label for="upDate">上传时间</label>-->
        <!--<input type="date" id="upDate" name="upDate" min="2012-09-05"/>-->
        <!--</section>-->
    </fieldset>
    <fieldset>
        <legend><span>图书其他信息&nbsp;可选 </span></legend>
        <!--是否收回-->
        <!--<section>-->
        <!--<h4>是否收回</h4>-->
        <!--<section>-->
        <!--<input id="isRecycleradio1" name="isRecycle" type="radio" value="1"/>-->
        <!--<label for="isRecycleradio1">收回</label>-->
        <!--</section>-->
        <!--<section>-->
        <!--<input id="isRecycleradio2" name="isRecycle" type="radio" value="0" checked="checked"/>-->
        <!--<label for="isRecycleradio2">不收回</label>-->
        <!--</section>-->
        <!--</section>-->
        <!--审核通过-->
        <!--<section>-->
        <!--<h4>是否审核通过</h4>-->
        <!--<section>-->
        <!--<input id="isPassradio1" name="isPass" type="radio" value="1" checked="checked"/>-->
        <!--<label for="isPassradio1">通过</label>-->
        <!--</section>-->
        <!--<section>-->
        <!--<input id="isPassradio2" name="isPass" type="radio" value="0"/>-->
        <!--<label for="isPassradio2">不通过</label>-->
        <!--</section>-->
        <!--</section>-->
        <!--规则ID-->
        <!--<section>-->
        <!--<h4>漂流规则</h4>-->
        <!--<section>-->
        <!--<input id="rulerIdradio1" name="rulerId" type="radio" value="0" checked="checked"/>-->
        <!--<label for="rulerIdradio1">没有限制</label>-->
        <!--</section>-->
        <!--<section>-->
        <!--<input id="rulerIdradio2" name="rulerId" type="radio" value="1"/>-->
        <!--<label for="rulerIdradio2">其他</label>-->
        <!--</section>-->
        <!--</section>-->
        <!--图书分类-->
        <!--职业-->
        <section>
            <label for="select_choice">选择图书类别</label>
            <select id="select_choice" name="catId">
                <option th:each="category:${categoryDOS}" th:value="${category.catId}" th:text="${category.catName}">
                    Choice 1
                </option>
            </select>
        </section>
        <!--&lt;!&ndash;用户ID&ndash;&gt;-->
        <!--<section>-->
        <!--<input type="text" name="userId" value="用户的Id"/>-->
        <!--</section>-->
    </fieldset>


    <div>
        <div class="layui-upload">
            <button type="button" class="layui-btn" style="width: 50%;" id="bookimgs">
                <i class="fa fa-cloud"></i>上传多张图书图片
            </button>
            <!--<button type="button" class="layui-btn" id="test2">多图片上传</button>-->
            <blockquote class="layui-elem-quote layui-quote-nm">
                预览图：
                <div class="layui-upload-list" id="imgspreview"></div>
            </blockquote>
            <p id="demoText"></p>
        </div>
        <input type="hidden" id="bookImg" name="bookImg" value="">
    </div>


    <!-- 开始提交按钮 -->
    <section>
        <input style="width: 150px;position: absolute;right: 10px;" type="submit" value="提交"/>
    </section>
</form>
<div th:include="include::footer"></div>
</body>
<script src="/js/layui.js"></script>
<script src="/js/plugins/layer/layer.min.js"></script>
<script type="text/javascript">


    //图片上传预览    IE是用了滤镜。
    function previewImage(file) {
        var MAXWIDTH = 260;
        var MAXHEIGHT = 180;
        var div = document.getElementById('preview');
        if (file.files && file.files[0]) {
            div.innerHTML = '<img id=imghead>';
            var img = document.getElementById('imghead');
            img.onload = function () {
                var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
                img.width = rect.width;
                img.height = rect.height;
//                 img.style.marginLeft = rect.left+'px';
                img.style.marginTop = rect.top + 'px';
            }
            var reader = new FileReader();
            reader.onload = function (evt) {
                img.src = evt.target.result;
            }
            reader.readAsDataURL(file.files[0]);
        }
        else //兼容IE
        {
            var sFilter = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
            file.select();
            var src = document.selection.createRange().text;
            div.innerHTML = '<img id=imghead>';
            var img = document.getElementById('imghead');
            img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
            var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
            status = ('rect:' + rect.top + ',' + rect.left + ',' + rect.width + ',' + rect.height);
            div.innerHTML = "<div id=divhead style='width:" + rect.width + "px;height:" + rect.height + "px;margin-top:" + rect.top + "px;" + sFilter + src + "\"'></div>";
        }
    }

    function clacImgZoomParam(maxWidth, maxHeight, width, height) {
        var param = {top: 0, left: 0, width: width, height: height};
        if (width > maxWidth || height > maxHeight) {
            rateWidth = width / maxWidth;
            rateHeight = height / maxHeight;

            if (rateWidth > rateHeight) {
                param.width = maxWidth;
                param.height = Math.round(height / rateWidth);
            } else {
                param.width = Math.round(width / rateHeight);
                param.height = maxHeight;
            }
        }

        param.left = Math.round((maxWidth - param.width) / 2);
        param.top = Math.round((maxHeight - param.height) / 2);
        return param;
    }
</script>

<script>
    layui.use('upload', function () {
        var upload = layui.upload
            , bookImg = ' ';
        //多图片上传
        upload.render({
            elem: '#bookimgs'
            , url: '/iphone/contribute/upload'
            , multiple: true
            , accept: 'images'
            , size: 5120
            , number: 5
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#imgspreview').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img" ' +
                        'style="max-height: 100px;max-height: 100px;margin: 3px 3px 1px 5px;border: solid 1px lightslategray">');
                });
            }
            , done: function (res) {
                //上传完毕
//                alert(res.fileName);
                bookImg += res.fileName + ",";
                $('#bookImg').val(bookImg);
                console.log(bookImg);
                layer.msg("successful!");
            }
            , error: function () {
                //请求异常回调
                layer.msg("please try again!");
            }
        });
    });
</script>

</html>